<template>
  <div class="container">
      <el-dialog
            title="抓取经纬度"
            :visible.sync="dialogShow"
            width="1000px">

               <div class="amap-page-container">
                    <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
                    <el-amap vid="amapDemo" :events="events" :center="mapCenter" class="amap-demo">
                        <el-amap-marker :position="marker" :label="label"></el-amap-marker>
                    </el-amap>
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmMap">确 定</el-button>
            </span>
        </el-dialog>

  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
      let that = this;
    return {
        dialogShow: false,
        address:'',
          marker: [113.625179,34.745527],
          searchOption: {
            city: '郑州',
            citylimit: false
          },
          label: {content:'113.625179,34.745527',offset: [30, 10]},
          mapCenter: [113.625179,34.745527],
          events:{
              click(e){
                console.log(e)
                  that.marker = [e.lnglat.lng,e.lnglat.lat];
                  that.label = {
                      content: e.lnglat.lng + ',' + e.lnglat.lat,
                      offset: [30, 10]
                  };

                  // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress(that.marker, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    that.address = result.regeocode.formattedAddress;
                    that.$nextTick();
                  }
                }
              }); 
              }
          },
    };
  },
// 方法
  methods: {
        show(city) {
		  if (city.label) {
			this.address = city.label;
			this.searchOption.city = city.label;
		  }
		  if(city.center){
			let l = city.center.split(',');
			this.marker = l;
			this.mapCenter = l;
			this.label = {
			  content: l,
			  offset: [30, 10],
			};
		  }
		  this.dialogShow = true;
		},
        onSearchResult(pois) {
          console.log(pois);
            this.marker = [pois[0].lng,pois[0].lat];
            this.mapCenter = [pois[0].lng,pois[0].lat];
            this.address = pois[0].address;
            this.label = {
                content: pois[0].lng + ',' + pois[0].lat,
                offset: [30, 10]
            };
        },
        // 确认
        confirmMap(){
          this.dialogShow = false;
          this.$emit('returnInfo', this.marker,this.address);
        }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
// 销毁
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.amap-demo {
      height: 500px;
    }

    .search-box {
      position: absolute;
      top: 25px;
      left: 20px;
    }

    .amap-page-container {
      position: relative;
    }
</style>